<template>
    <CrudPage
        :initialFormData="initialFormData"
        v-model:formData="formData"
        :columns="columns"
        :getApi="getGoodsCateApi"
        :updateApi="updateGoodsCateApi"
        :deleteApi="deleteGoodsCateApi"
        :createApi="createGoodsCateApi"
        :form="form"
        :scrollX="2500"
        :customEditRecord="record => (record === '0' ? '0' : typeof record.pid === 'object' ? { ...record, pid: record.pid._id } : record)"
    >
        <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'cate_img'">
                <AImage v-if="record.cate_img" :src="`${baseUrl}${record.cate_img}`" :width="40" :height="40" />
            </template>
        </template>
        <template #form>
            <AFormItem label="分类图片" name="cate_img">
                <CustomUpload v-model:image="formData.cate_img" />
            </AFormItem>
        </template>
    </CrudPage>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from "vue";
import { getGoodsCateApi, updateGoodsCateApi, deleteGoodsCateApi, createGoodsCateApi, GoodsCate } from "@/api/goods";
import CrudPage from "@/components/CrudPage.vue";
import CustomUpload from "@/components/CustomUpload.vue";
import { ColumnType } from "ant-design-vue/es/vc-table/interface";
interface ColumnAndForm extends ColumnType<any> {
    type: string;
    options: { value: any; innerText: any }[];
}
export default defineComponent({
    components: {
        CrudPage,
        CustomUpload,
    },
    setup() {
        const initialFormData = {
            title: "",
            cate_img: "",
            link: "",
            template: "",
            pid: "0",
            sub_title: "",
            keywords: "",
            description: "",
            status: 1,
            sort: 100,
        };
        const columns = reactive<Partial<ColumnAndForm>[]>([
            { dataIndex: "title", title: "分类名", width: 10, fixed: "left", type: "input" },
            { dataIndex: "cate_img", title: "分类图片", width: 10 },
            { dataIndex: "link", title: "链接", width: 10, type: "input" },
            { dataIndex: "template", title: "模板", width: 10, type: "input" },
            {
                dataIndex: "pid",
                title: "父级分类",
                width: 10,
                type: "select",
                customRender: ({ text }) => (text === "0" ? "--一级分类--" : typeof text === "object" ? text.title : text),
            },
            { dataIndex: "sub_title", title: "副标题", width: 10, type: "input" },
            { dataIndex: "keywords", title: "关键词", width: 10, type: "textarea" },
            { dataIndex: "description", title: "描述", width: 10, type: "textarea" },
            {
                dataIndex: "status",
                title: "状态",
                width: 10,
                type: "select",
                options: [
                    { value: 1, innerText: "可用" },
                    { value: 0, innerText: "不可用" },
                ],
                customRender: ({ text }: { text: number }) => (text ? "可用" : "不可用"),
            },
            { dataIndex: "sort", title: "排序号", width: 10, type: "inputNumber" },
            { dataIndex: "_id", title: "ID", width: 0, ellipsis: true },
            { dataIndex: "operation", title: "操作", width: 10, fixed: "right" },
        ]);
        const form = reactive(
            columns
                .filter(item => item.type)
                .map(({ type, options, title, dataIndex }) => {
                    if (dataIndex === "pid") {
                        return {
                            type,
                            options: computed(() =>
                                [{ value: "0", innerText: "--空--" }].concat(
                                    state.goodsCateList.map((item: GoodsCate) => ({ value: item._id, innerText: item.title }))
                                )
                            ),
                            dataIndex,
                            label: title,
                        };
                    }
                    return { type, options, dataIndex, label: title };
                })
        );
        const state = reactive({
            formData: { ...initialFormData },
            goodsCateList: [],
        });
        const getGoodsCate = () => {
            getGoodsCateApi().then(res => {
                if (res.code === 200) {
                    state.goodsCateList = res.data;
                }
            });
        };
        getGoodsCate();
        return {
            ...toRefs(state),
            getGoodsCateApi,
            updateGoodsCateApi,
            deleteGoodsCateApi,
            createGoodsCateApi,
            initialFormData,
            columns,
            form,
            baseUrl: process.env.VUE_APP_BASEURL,
        };
    },
});
</script>

<style scoped lang="scss"></style>
